import React, { useEffect, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { Toast, SegmentedControl, Flex, List } from '@ant-design/react-native';
import UserStore from '@/stores/userStore';
import FlightScheduleStore from './flightScheduleStore';
import MaintainFilterHeader from '@/screens/aviationMaintain/components/maintainFilterHeader';
import { LoadingContainer } from '@/rcomponents/Container';

const styles = StyleSheet.create({
  scheduleHeader: {
    textAlign: 'center',
    textAlignVertical: 'center',
    backgroundColor: 'transparent',
    borderTopLeftRadius: 3,
    borderBottomLeftRadius: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  // flexCenter: {
  //   justifyContent: 'center',
  //   alignItems: 'center',
  // },
  textCenter: {
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  darkBackground: {
    backgroundColor: '#f0f8ff',
  },
  scheduleBody: {
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderLeftWidth: 1,
    borderColor: '#ddd',
    borderBottomWidth: 1,
  },
  headText: {
    fontSize: 15,
    color: '#a9a9a9',
  },
});

const FlightScheduleScreen = ({ index }) => {
  const fsStore = FlightScheduleStore.useStore();
  const userStore = UserStore.useStore();
  const { filterCond } = fsStore;
  const [tabIndex, setTabIndex] = useState(0);

  const handleListLoad = async (filter) => {
    const res = await fsStore.getFlightScheduleList(
      userStore.user.LoginName,
      filter || filterCond,
    );
    if (res.errorCode) {
      Toast.fail(res.errorMsg);
    }
  };

  return (
    <LoadingContainer
      loading={fsStore.getFlightScheduleList.loading}
      onRefresh={handleListLoad}
      header={
        <List>
          <MaintainFilterHeader
            onReload={handleListLoad}
            filterCond={filterCond}
          />
          <SegmentedControl
            values={[
              `全部${fsStore.list[0].length}`,
              `未飞${fsStore.list[1].length}`,
              `已飞${fsStore.list[2].length}`,
              `到达${fsStore.list[3].length}`,
            ]}
            selectedIndex={tabIndex}
            onChange={(event) => {
              setTabIndex(event.nativeEvent.selectedSegmentIndex);
            }}
          />
          <Flex wrap="nowrap">
            <Flex.Item style={[styles.scheduleHeader, styles.darkBackground]}>
              <Text style={[styles.headText]}>航班</Text>
            </Flex.Item>
            <Flex.Item style={[styles.scheduleHeader]}>
              <Text style={[styles.headText]}>出发/机位</Text>
            </Flex.Item>
            <Flex.Item style={[styles.scheduleHeader, styles.darkBackground]}>
              <Text style={[styles.headText]}>目的/机位</Text>
            </Flex.Item>
            <Flex.Item style={[styles.scheduleHeader]}>
              <Text style={[styles.headText]}> 起飞 </Text>
            </Flex.Item>
            <Flex.Item style={[styles.scheduleHeader, styles.darkBackground]}>
              <Text style={[styles.headText]}>到达</Text>
            </Flex.Item>
          </Flex>
        </List>
      }
      data={fsStore.list[tabIndex]}
      renderItem={({ item }) => (
        <Flex>
          <Flex.Item style={[styles.scheduleBody]}>
            <Text style={[styles.textCenter]}>{item.airplane_no}</Text>
          </Flex.Item>
          <Flex.Item style={[styles.scheduleBody]}>
            <Text style={[styles.textCenter]}>{item.embarkedBay} </Text>
          </Flex.Item>
          <Flex.Item style={[styles.scheduleBody]}>
            <Text style={[styles.textCenter]}>{item.arrivedBay} </Text>
          </Flex.Item>
          <Flex.Item style={[styles.scheduleBody]}>
            <Text style={[styles.textCenter]}> {item.departureTime} </Text>
          </Flex.Item>
          <Flex.Item style={[styles.scheduleBody]}>
            <Text style={[styles.textCenter]}>{item.arrivelTime}</Text>
          </Flex.Item>
        </Flex>
      )}
    />
  );
};

FlightScheduleScreen.routeName = 'FlightScheduleScreen';
FlightScheduleScreen.permission = 'RFlightSchedule';
export default FlightScheduleScreen;
